.code1 {
overflow:auto;width:250px;height:260px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#ffffff;
margin : 15px 35px 15px 15px;
padding : 15px 5px 10px 165px;
clear : both;
list-style-type : none;
background : url(http://1.bp.blogspot.com/-0hmGWoHIzzw/T33HKCEE6UI/AAAAAAAABoY/q-hkpq3JFAU/s1600/teacher.png) repeat-y top left;
border : 1px solid #ffffff;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.code1:hover{
background : url(http://2.bp.blogspot.com/-lvYfexW_FJY/T33HMP7cWzI/AAAAAAAABoc/X-S1XOKu9aE/s1600/hover+html+teacher.png) repeat-y top left;
color:#F1F1F1;
border : 1px solid #ffffff;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}

.code2 {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(http://3.bp.blogspot.com/-gNZ5r7KaLIE/T33PEnGXSJI/AAAAAAAABoo/cDcreY3-mPc/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}

.code3 {
 display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
    font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  color: #446578;
  text-align: justify;
  border-left: 15px solid #EBF2F8;
  border-right: 1px dotted #EBF2F8;
    -moz-box-shadow: -1px 2px 5px #ccc;
  -webkit-box-shadow: -1px 2px 5px #ccc;
  box-shadow: -1px 2px 5px #ccc;
}
.code3:before{
  content: "\201C"; 
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #8DACC0;
  position: absolute;
  left: 10px;
  top:5px;
}

.code3:after{
  content: "";
}

.code3 a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}

.code3 a:hover{
 color: #666;
}

.code4{
color:#000000;
font-weight:bold;
overflow:hidden;width:200px;height:300px;
background-image:url(http://1.bp.blogspot.com/-2jbnIgBmtXE/T33WAang2BI/AAAAAAAABow/IuAbu9nzWVw/s1600/papyrus.jpg);
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
border : 1px solid #000000;
border-right:10px solid #CFA372;
list-style-type : none;
transition:width 2s;
text-position:fixed;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
box-shadow: 10px 10px 5px #888888;
}

.code4:hover{
width:300px;
color:#000;
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
} 


.code5{
overflow:auto;width:570px;height:310px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 15px 15px 15px;
padding : 20px 10px 0px 35px;
clear : both;
color:#ffffff;
list-style-type : none;
background : #F7F7F7 url(http://2.bp.blogspot.com/-taPvvl_ckpM/T33X_sggZPI/AAAAAAAABo4/yKxXn49IF7s/s1600/copy-to-clipboard-cmd-3.png) repeat-y top left;
border : 1px solid #EEEEEE;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;

}
.code5:hover{
background : #FFFFFF url(http://2.bp.blogspot.com/-taPvvl_ckpM/T33X_sggZPI/AAAAAAAABo4/yKxXn49IF7s/s1600/copy-to-clipboard-cmd-3.png) repeat-y top left;
border : 1px solid #EEEEEE;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
}

.code-5{
overflow:auto;width:542px;height:230px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 15px 15px 15px;
padding : 20px 10px 0px 0px;
clear : both;
color:#96948A;
list-style-type : none;
background : #000 ;
border : 1px solid #000;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;

}


.code6 {
overflow:auto;width:360px;height:250px;
font-family: "Arial";
color:#47262E;
margin : 15px 35px 15px 15px;
padding : 25px 0px 0px 50px;
clear : both;
list-style-type : none;
background : url(http://3.bp.blogspot.com/-LBm9I9TMM6g/T33wA7ME3TI/AAAAAAAABpI/sTgD4XwuQcA/s1600/blockquote.gif);
background-repeat: no-repeat;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;
}